<template>
  <el-dialog v-dialogDrag title="编辑" :visible="isShowEditDialog" width="40%" @close="dialogClose"
    :close-on-click-modal="false">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px">
      <el-form-item label="路由地址：" prop="path">
        <el-input v-model="ruleForm.path" placeholder="/index" :disabled="power"></el-input>
      </el-form-item>
      <!-- <el-form-item label="路由名称：" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item> -->
      <el-form-item label="路由名称：" prop="name">
        <el-input v-model="ruleForm.name" :disabled="power"></el-input>
      </el-form-item>
      <el-form-item label="菜单名称：" prop="nameZh">
        <el-input v-model="ruleForm.nameZh"></el-input>
      </el-form-item>
      <el-form-item label="图标：" prop="iconCls">
        <el-input v-model="ruleForm.iconCls"></el-input>
      </el-form-item>
      <el-form-item label="组件路径：" prop="component">
        <el-input v-model="ruleForm.component" placeholder="解析路由对应的组件" :disabled="power"></el-input>
      </el-form-item>
      <el-form-item label="优先级：" prop="priority">
        <el-input type="number" v-model="ruleForm.priority" placeholder=">=0 数字越小越靠前"></el-input>
      </el-form-item>
      <el-form-item label="type：" prop="type">
        <el-input v-model="ruleForm.type"></el-input>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input v-model="ruleForm.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()" class="pull-right margin-l-25">确定
        </el-button>
        <el-button @click="dialogClose" class="pull-right">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { updateMenu } from "@/api/systemManage/menuManage";
export default {
  name: 'MenuManageEdit',
  data () {
    return {
      ruleForm: {},
      rules: {},
      power: true
    }
  },
  props: {
    isShowEditDialog: {
      type: Boolean,
    },
    record: {
      type: Object,
    },
  },

  methods: {
    dialogClose () {
      this.$emit("dialogClose");
    },
    submitForm () {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) {
          return;
        } else {
          updateMenu(this.ruleForm).then((res) => {
            this.dialogClose()
            this.$router.go(0)
          })
        }
      });
    },

  },
  mounted () {
    this.ruleForm = Object.assign({}, this.record)
    if (localStorage.getItem('role') == '系统管理员') {
      this.power = false
    }
  },
};
</script>

<style lang="less" scoped></style>
